<template>
  <div style="margin-left: 20px">
    <el-row>
      <div>
        <div class="col-container">
          <el-col :span="8">
            <span>项目编号：{{ projectInfo.projectCode }}</span>
          </el-col>
          <el-col :span="8">
            <span>项目名称：{{ projectInfo.projectName }}</span>
          </el-col>
          <el-col :span="8">
            <span>采购类别：{{ projectInfo.categoryName }}</span>
          </el-col>
          <el-col :span="8">
            <span>预算金额：{{ projectInfo.budget }}元</span>
          </el-col>
        </div>

        <div class="col-container" style="margin-top: 2em;">
          <el-col :span="8">
            <span>成交供应商：{{supplierPrice.supplierName }}</span>
          </el-col>
          <el-col :span="8">
            <span>报价排名：{{ supplierPrice.priceRanking }}</span>
          </el-col>
          <el-col :span="8">
            <span>报价：{{ supplierPrice.price }}元</span>
          </el-col>

        </div>
      </div>


      <!-- 生成成交合同 -->
      <div style="margin-top: 4em;">
        <div style="margin-top:1em">
          <span>生成的成交合同</span>
        </div>
        <el-button
            size="small"
            type="primary"
            :disabled="projectInfo.contractSubmitStatus === '已提交'"
            :style="projectInfo.contractSubmitStatus === '已提交' ? 'margin-top: 1em; margin-left: 10px; background-color: #ccc; cursor: not-allowed;' : 'margin-top: 1em; margin-left: 10px;'"
            @click="createContracts"
        >
          生成成交合同
        </el-button>
        <el-table
            :data="contracts"
            border
            size="small"
            style="margin-top: 1em;width: 100%">
          <el-table-column
              prop="generateDate"
              min-width="140px"
              label="生成时间"
          >
          </el-table-column>
          <el-table-column
              prop="filename"
              min-width="140px"
              label="文件名"
          >
          </el-table-column>
          <el-table-column
              width="120px"
              label="操作"
          >
<!--            <template slot-scope="{$index,row}">-->
<!--              <el-button type="text" style="text-align: center;margin-left: 7px" @click="downloadContractsFile(row)">下载</el-button>-->
<!--            </template>-->

            <template slot-scope="{$index, row}">
              <el-button type="text" style="text-align: center;margin-left: 7px" @click="downloadContractsFile(row)">下载</el-button>

              <el-popconfirm title="确定删除吗？" @confirm="handleDeleteContracts(row)">
                <el-button
                    type="text"
                    style="margin-left: 7px"
                    :style="{ color: projectInfo.contractSubmitStatus === '已提交' ? 'gray' : 'red' }"
                    :disabled="projectInfo.contractSubmitStatus === '已提交'"
                    slot="reference"
                >
                  删除
                </el-button>
                <el-button
                    type="primary"
                    slot="action"
                    style="color: #fff; background-color: #ff4949; border-color: #ff4949;"
                >
                  确定
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <span>合同审批状态：{{ projectInfo.contractApproveStatus }}</span><br/>
        <span>合同提交状态：{{ projectInfo.contractSubmitStatus }}</span><br/>
        <span>结果报告和成交结果通知书生产状态：</span>
        <span v-if="resultReport === '1'">已生成</span>
        <span v-if="resultReport === '0'">未生成</span>


      </div>
      <div style="text-align: center;">
        <el-button
            size="small"
            type="primary"
            :disabled="projectInfo.contractSubmitStatus === '已提交' || resultReport === '0'"
            :style="projectInfo.contractSubmitStatus === '已提交' ? 'margin-top: 1em; background-color: #ccc; cursor: not-allowed;' : 'margin-top: 1em;'"
            @click="sumbitContract"
        >
          合同提交评审
        </el-button>
      </div>




      <!--          上传盖章后合同         -->
      <el-col :span="24">
        <div style="margin-top: 4em">

          <div style="margin-top: 1em">
            <span>上传的成交合同</span>
          </div>
          <el-upload
              style="margin-top: 1em; margin-left: 10px; display: inline;"
              :show-file-list="false"
              :headers="token"
              :action="uploadUrl"
              ref="upload"
              accept=".pdf"
              :on-success="handleSuccess"
              :on-progress="progress"
              :on-error="fileError"
              v-loading.fullscreen.lock="loading"
              :element-loading-text="progressPercentTitle"
              element-loading-spinner="el-icon-loading"
              element-loading-backgroud="rgba(0,0,0,0.1)"
              :disabled="projectInfo.archiveSubmitStatus === '已提交' ||  projectInfo.contractApproveStatus === '退回' || projectInfo.contractApproveStatus === '未审批'"
          >
            <el-button
                style="margin-top: 1em"
                size="small"
                type="primary"
                :style="(projectInfo.archiveSubmitStatus === '已提交' ||  projectInfo.contractApproveStatus === '退回' || projectInfo.contractApproveStatus === '未审批')  ? 'background-color: #ccc; cursor: not-allowed;' : ''"
            >
              上传盖章后的成交合同
            </el-button>
            <div slot="tip" class="el-upload__tip">只能上传pdf文件，且不超过200Mb</div>
          </el-upload>
        </div>

        <div style="margin-top: 10px;margin-bottom: 10px" v-if="true">
          <el-table
              :data="contractsStamped"
              border
              size="small"
              style="width: 100%">
            <el-table-column
                prop="generateDate"
                min-width="140px"
                label="上传时间"
            >
            </el-table-column>
            <el-table-column
                prop="filename"
                min-width="140px"
                label="文件名"
            >
            </el-table-column>
            <el-table-column
                width="120px"
                label="操作"
            >
<!--              <template slot-scope="{$index,row}">-->
<!--                <el-button type="text" style="text-align: center;margin-left: 7px" @click="downloadContractsStamped(row)">下载</el-button>-->
<!--              </template>-->

              <template slot-scope="{$index, row}">
                <el-button type="text" style="text-align: center;margin-left: 7px" @click="downloadContractsStamped(row)">下载</el-button>

                <el-popconfirm title="确定删除吗？" @confirm="handleDeleteContractsStamped(row)">
                  <el-button
                      type="text"
                      style="margin-left: 7px"
                      :style="{ color: projectInfo.archiveSubmitStatus === '已提交' ? 'gray' : 'red' }"
                      :disabled="projectInfo.archiveSubmitStatus === '已提交'"
                      slot="reference"
                  >
                    删除
                  </el-button>
                  <el-button
                      type="primary"
                      slot="action"
                      style="color: #fff; background-color: #ff4949; border-color: #ff4949;"
                  >
                    确定
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <br/>
          <span>归档提交状态：{{ projectInfo.archiveSubmitStatus }}</span>
        </div>
      </el-col>

    </el-row>
  </div>

</template>

<script>


import {
  addContracts,
  downloadContractsFile,
  downloadContractsStamped,
  getContracts,
  getContractsStamped,
  sumbitContract,
  deleteContracts,
  deleteContractsStamped,
} from "@/api/concludeContract";
import {serverIp} from "../../../public/config";
import downloadFile from "@/utils/downloadFile";
import {deleteProject} from "@/api/projectAcceptance";

export default {
  props: {
    projectInfo: {
      type: Object,
      default () {
        return {}
      }
    },
    contracts: {
      type: [],
      default() {
        return [];
      }
    },
    contractsStamped: {
      type: [],
      default() {
        return [];
      }
    },
    supplierPrice: {
      type: [],
      default() {
        return [];
      }
    },
    required: true,
    resultReport:"",
  },
  data() {
    return {
      project: {},
      submitStatus:"",
      approveStatus:"",
      addContracts:{
        supplierName: "",
        priceRanking: "",
        price: "",
        budget: "",
        categoryName: "",
        projectName: "",
        projectCode: "",
      },

      token: { Authorization:localStorage.getItem("token") },
      uploadUrl: `${serverIp}/concludeContract/uploadFile/resultStamped/${this.projectInfo.projectId}`,
      loading: false,
      supplierName: "", // 供应商名字
      progressPercentTitle: "", // 展示百分比
      progressPercent: 0, // 进度

    }
  },
  mounted() {
    this.project = this.projectInfo
    this.submitStatus=this.projectInfo.supplyerSubmitStatus
    this.approveStatus=this.projectInfo.contractApproveStatus
  },
  watch: {
    projectInfo: {
      // 监听数据发生变化的处理函数
      handler(newV) {
        this.project = JSON.parse(JSON.stringify(newV));//将监听到修改的值赋予到dataAttrs中
      },
      // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
      deep: true
    }
  },
  methods: {
    async createContracts() {
          let theDate = {
            projectId: this.projectInfo.projectId,
            price: this.supplierPrice.price,
            budget: this.projectInfo.budget,
            categoryName: this.projectInfo.categoryName,
            projectName: this.projectInfo.projectName,
            priceRanking: this.supplierPrice.priceRanking,
            supplierName: this.supplierPrice.supplierName
          }
          // debugger
          console.log(theDate)
          let res = await addContracts(theDate);
          if (res.data.code === 200){
            this.$message.success("生成成功")
            // this.$refs["projectInvitationInfo"].resetFields();
            await this.getContracts()
          }else {
            this.$message.error(res.data.msg)
          }
          getContracts()
          console.log("cccccc"+this.contracts)
    },

    // 获得全部成交合同
    async getContracts(){
      let res = await getContracts(this.project.projectId)
      if (res.data.code === 200){
        this.contracts = res.data.data;
      }else {
        this.$message.error(res.data.msg)
      }
    },
    // 上传文件时钩子
    progress(event,file,fileList){
      this.loading = true;
      this.progressPercent = Math.floor(event.percent);
      this.progressPercentTitle = "已上传" + this.progressPercent + "%"
    },
    fileError(err){
      this.loading=false;
      console.log(err)
      this.$message.error("失败")
    },
    handleSuccess(res){
      this.loading = false;
      // console.log("ddddddddddddddddddddd"+res.code)
      if (res.code === 201){
        alert("上传失败，只能上传PDF文件，请重新上传！")
      }
      // this.$message.success("上传成功")
      // alert("上传成功！")
      this.getContractsStamped()
    },
    async getContractsStamped(){
      let resTag = await getContractsStamped(this.project.projectId)
      if (resTag.data.code === 200){
        this.contractsStamped = resTag.data.data;
      }
      // else if (resTag.data.code === 201){
      //   alert("上传失败！")
      //   this.$message.error(resTag.data.msg)
      //
      // }
      else {
        this.$message.error(resTag.data.msg
        )
      }
    },
    async downloadContractsFile(row){
      let res = await downloadContractsFile(row.id)
      console.log("rrrrrrrrrrrrr"+res)
      downloadFile(res,row.filename)
    },

    async downloadContractsStamped(row){
      let res = await downloadContractsStamped(row.id)
      console.log("ssssssssssssssss"+res)
      downloadFile(res,row.filename)
    },
    async handleDeleteContracts(row) {
      let resTag = await deleteContracts(row.id)
      if (resTag.data.code === 200) {
        alert("删除成功")
        await this.getContracts()
      } else {
        this.$message.error(resTag.data.msg)
      }
    },
    async handleDeleteContractsStamped(row) {
      let resTag = await deleteContractsStamped(row.id)
      if (resTag.data.code === 200) {
        alert("删除成功")
        await this.getContractsStamped()
      } else {
        this.$message.error(resTag.data.msg)
      }
    },

    async sumbitContract() {
      let resTag = await sumbitContract(this.project.projectId)
      if (resTag.data.code === 200){
        alert("已提交，请等待审核通过")
        this.projectInfo.contractSubmitStatus = resTag.data.data.submitStatus;
        this.projectInfo.contractApproveStatus = resTag.data.data.contractApproveStatus;
        console.log("submit"+resTag.data.data)
      }else {
        this.$message.error(resTag.data.msg)
      }


    }
  }
}

</script>

<style scoped>
.col-container {
  display: flex;
  justify-content: space-between;
}
</style>
